@import url(../css/command.css);
@import url(../css/rest.css);
@import url(../utils/iconfont.css);

// 整体
.warp{
    width: 100vw;
    // 头部部分
    header{
        width: 94.6667vw;
        margin: 0 2.6667vw;
        // 头部顶部
        .header_top{
            width: 100%;
            display: flex;
            justify-content: space-between;
            // 右侧信封区域样式
            .letter_icon_box{
                width: 8.5333vw;
                height: 7.6vw;
                position: relative;
                .header_xinfeng{
                    font-size: 8vw;
                    color: #ff9344;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
                // 信封件数
                .icon_num{
                    width: 3.7333vw;
                    height: 3.7333vw;
                    display: block;
                    background-color: #fa5050;
                    border-radius: 50%;
                    text-align: center;
                    position: absolute;
                    top: 0;
                    right: 0.6667vw;
                    // 信封文字
                    span{
                        display: block;
                        font-size: 2.4vw;
                        color: #fff;
                        line-height: 3.7333vw;
                    }
                }
            }
        } 
        // 头部中间区域
        .header_mid{
            width: 100%;
            margin: 2.6667vw 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            // 头像、登录区域
              .header_mid_left{
                display: flex;
                justify-content: space-between;
                   .head_picture{
                    width: 22.6667vw;
                      img{
                        width: 100%;
                        display: block;
                      }
                   }
                //    登录文字
                   .person_pass{
                    margin-left: 2.6667vw;
                       display: flex;
                       flex-direction: column;
                       justify-content: space-evenly;
                       
                      & p:nth-of-type(1){
                        font-size: 4vmin;
                        a{
                            color: #000;
                            font-weight: 600;
                        }
                      }
                      & p:nth-of-type(2){
                        font-size: 3.4667vw;
                         a{
                            color: #9d9d9d;
                         }
                      }
                   }
              }
            //   右箭头
              .right_icon{
                  font-size: 11.6vw;
                  a{
                    color: #000;
                  }
              }
        }
        .header_botm{
            width: 100%;
            .mine_navlist{
                width: 100%;
                display: flex;
                justify-content: space-between;
                .mine_nav_box{
                   width: 26vw;
                   height: 20.1333vw;
                   text-align: center;
                   font-size: 3.4667vmin;
                   img{
                    display: block;
                    margin:2.6667vw auto 1.3333vw;
                   }
                     &:hover{
                        box-shadow: #9d9d9d  .2667vw .2667vw .2667vw .2667vw;
                     }
                }
                & div:nth-of-type(1){
                    background-color: #b2e0a0;
                    img{
                        width: 10.9333vw;
                    }
                }
                & div:nth-of-type(2){
                    background-color: #a0dce0;
                    img{
                        width: 11.2vw;
                    }
                    p{
                        margin-top: 2vw;
                    }
                }
                & div:nth-of-type(3){
                    background-color: #e0b7a0;
                    img{
                        width: 16.5333vw;
                    }
                    p{
                        margin-top: 2vw;
                    }
                }
            }
        }
    }
    main{
     width: 94.6667vw;
     margin: 4.6667vw 2.6667vw;
        .mine_cont_list{
            & div:nth-of-type(4){
                margin-bottom: 9.6667vw;
            }
        }
        .mine_botm_box{
            width: 71.7333vw;
            // height: 10.6667vw;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
             button{
                width: 19.6vw;
                height: 10.1333vw;
                border-radius: 5.0667vw;
                border: 0;
                background-color: #ff9344;
                a{
                    font-size: 3.2vmin;
                    color: #fff;
                }
             }    
        }
    }
    footer{
         .navb_list{
            .nav_box{
                .mine{
                    .tou,.shen{
                        background-color: #ff9344;
                    }
                }
            }
         }
    }
}